<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>figure demo</title>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Lato);

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #1a1e23;
      }

      .float-text-menu {
        display: flex;
        flex-direction: column;
        list-style-type: none;
      }

      .float-text-menu li a {
        display: flex;
        padding: 6px;
        color: white;
        font-family: Lato, sans-serif;
        text-decoration: none;
        overflow: hidden;
      }

      .float-text-menu li a span {
        position: relative;
        transition: 0.3s;
      }
      .float-text-menu li a span ::before {
        position: absolute;
        content: attr(data-text);
        transform: translateY(130%);
      }

      .float-text-menu li a:hover span {
        transform: translateY(-130%);
      }
    </style>
  </head>
  <body>
    <ul class="float-text-menu">
      <li><a href="#" data-text="Home">众生万象,皆有因果</a></li>
    </ul>

    <script>
      let floatTextMenuLinks = document.querySelectorAll(
        ".float-text-menu li a"
      );
      floatTextMenuLinks.forEach((link) => {
        let letters = link.textContent.split("");
        link.textContent = "";
        letters.forEach((letter, i) => {
          let span = document.createElement("span");
          span.textContent = letter;
          span.style.transitionDelay = `${i / 20}s`;
          span.dataset.text = letter;
          link.append(span);
        });
      });
    </script>
  </body>
</html>
